<template>
  <div class="container">
      <div class="table-data">
        <el-card class="box-card">
            <!-- 提示区域 -->
            <el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
            <!-- 步骤条区域 -->
            <el-steps :active="activeIndex - 0" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="商品规格"></el-step>
                <el-step title="商品详情"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- Tab栏 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top">
                <el-tabs v-model="activeIndex" :tab-position="'left'" :before-leave="beforeTabLeave">
                    <el-tab-pane label="基本信息" name="0">
                        <el-form-item label="商品名称" prop="good_name">
                            <el-input v-model="addForm.good_name"></el-input>
                        </el-form-item>
                        <el-form-item label="封面价格" prop="price">
                            <el-input v-model="addForm.price" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="分类" prop="type_id">
                            <el-select v-model="addForm.type_id" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <!-- <el-input v-model="addForm.type_id"></el-input> -->
                        </el-form-item>
                        <!-- <el-form-item label="一级id" prop="type_parent_id">
                            <el-input v-model="addForm.type_parent_id" disabled></el-input>
                        </el-form-item> -->
                        <el-form-item label="商品参数名称" prop="sup">
                            <el-alert
                            title="输入示例：CPU,网络,重量(参数名以逗号分隔)"
                            show-icon
                            type="warning">
                            </el-alert>
                            <el-input v-model="sup" @blur="addspu"></el-input>
                           
                        </el-form-item>
                         <el-form-item class="sku-reg" :label="index" v-for="(item,index) in addForm.colour" :key="index" >
                                <el-input v-if="index" v-model="addForm.colour[index]"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品规格" name="1">
                       

                        <!-- ==================  sku规范添加  ========================== -->
                         <div class="shili-box">
                            <div class="shili-title">商品规格示例图如下:</div>
                            
                            <div>
                                <img src="../../assets/shili.png" width="335px" height="111px" alt="">
                            </div>
                            
                        </div>

                        <el-button 
                        type="primary"
                        size= "small" 
                        icon="el-icon-circle-plus"
                        @click="_addSpecifoca">添加规格类型</el-button>

                        
                        <div class="specification" v-for="(item,index) in templateData" :key="`item${index}`">
                            <i class="el-icon-error error-btn"
                            @click="_deleteTemplateData(index)"></i>
                            <el-input 
                            v-model="item.name"
                            placeholder="请输入规格名称，如尺寸;"
                            style="margin-bottom:20px">
                            
                            </el-input>
                            
                            <div v-show="item.name" class="tag-box">
                                <el-tag
                                :key="`${tag}index`"
                                v-for="tag in item.dynamicTags"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag,item)">
                                {{tag}}
                                </el-tag>
                                <el-input
                                class="input-new-tag"
                                v-if="item.tagInputVisible"
                                :ref="'saveTagInput'+index"
                                v-model="item.tagInputValue"
                                v-focus="item.focusState"
                                size="small"
                                @keyup.enter.native="handleInputConfirm(item, index)"
                                @blur="handleInputConfirm(item, index)"
                                >
                                </el-input>
                                <el-button 
                                v-else 
                                class="button-new-tag" 
                                size="small" 
                                 @click="_addshowInput(item, index)">
                                + 新增</el-button>
                            </div>

                        </div>

                         <el-button size= "small" type="primary" @click="addsku" class="confirm-btn">确认</el-button>

                        <!-- <p style="font-size:12px" v-if="picUrl!=''">
                             图片路径：{{picUrl}} <el-button class="tag-read" type="text" :data-clipboard-text="picUrl" @click="copy" icon="el-icon-edit" size="mini">复制</el-button>
                        </p> -->
                        <div class="stepFour__name">
                            <div
                            v-for="(nameItem,nameIndex) in templateNameList"
                            :key="`nameItem${nameIndex}`"
                            class="item"
                            >{{ nameItem }}</div>
                        </div>
                        <div v-show="newTemplateData.length>0" class="stepFour__box">
                            <div
                            v-for="(item,index) in newTemplateData"
                            :key="`item${index}`"
                            class="stepFour__box__panel"
                            >
                            <div
                                v-for="(childItem,childIndex) in item"
                                :key="`childItem${childIndex}`"
                                class="item"
                            >
                                <span
                                v-show="childIndex!=(item.length-3) && childIndex!=(item.length-2) && childIndex!=(item.length-1)"
                                >{{ childItem }}</span>
                                <el-input
                                v-show="childIndex==(item.length-3)"
                                v-model="childItem.stockNum"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                placeholder="输入库存"
                                style="width:100%"
                                />
                                <el-input
                                v-show="childIndex==(item.length-2)"
                                v-model="childItem.price"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                placeholder="输入价格"
                                style="width:100%"
                                />
                                <div class="last-box">
                                    
                        <el-upload
                        v-show="childIndex==(item.length-1)"
                        class="upload-demo" name="img"
                        action=""
                        :on-progress='handleProgress'
                        :show-file-list="false"
                        :on-preview="handlePreview"
                        :http-request="uploadFile3"
                        :on-remove="handleRemove"
                        :auto-upload= "true"
                        :on-exceed="handleExceed"
                         style="width:40%;margin-right:20px"
                        >
                        <el-button size= "small" icon="el-icon-circle-plus" type="primary" @click='getindex(index)'>添加图片</el-button>
                        </el-upload>
                                <!-- <el-input
                                v-show="childIndex==(item.length-1)"
                                v-model="childItem.pic"
                                placeholder="输入图片"
                                style="width:40%"
                                /> -->
                                <img  v-show="(childItem.pic)" :src='childItem.pic' style="margin-top:5px" width="40px" height="40px" alt="">
                                </div>
                                
                            </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="商品详情" name="2">
                        <editors></editors>
                    </el-tab-pane>

                    <el-tab-pane label="商品图片" name="3" style="min-height:300px">
                        <p style="font-size:14px">上传商品封面</p>
                        <el-upload
                        class="upload-demo" name="img"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-change="handleChange"
                        :on-preview="handlePreview"
                        :http-request="uploadFile"
                        :on-remove="handleRemove"
                        :auto-upload= "true"
                        :limit="1"
                        list-type="picture"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                            <el-button size= "small" type="primary" >点击上传</el-button>
                        </el-upload>
                        <p></p>
                        <p></p>
                        <p></p>
                        <hr>
                        <p style="font-size:14px">上传轮播图</p>
                        <el-upload
                        class="upload-demo" name="img"
                        action=""
                        list-type="picture"
                        :on-change="handleChange"
                        :on-preview="handlePreview"
                        :http-request="uploadFile2"
                        :on-remove="handleRemove"
                        :auto-upload= "true"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                            <el-button size= "small" type="primary" >点击上传</el-button>
                        </el-upload>
                        <div style="width:100%;display: flex;justify-content: center;margin:30px 0">
                            
                        </div> 
                    </el-tab-pane>
                    <div class="rigEnd">
                        <el-button
                            v-show="activeIndex!=0"
                            type="text"
                            class="previousBtn"
                            @click="_previousStep"
                            >上一步</el-button>
                            <el-button v-show="activeIndex!=3" type="primary" class="saveBtn" @click="_nextStep">下一步</el-button>
                            <!-- <el-button
                                v-show="activeIndex==1"
                                type="primary"
                                class="saveBtn"
                                @click="_saveTemplate"
                            >保存</el-button> -->
                            <el-button type="primary" v-show="activeIndex==3" style="width:200px" @click="submitInfo">提交</el-button> 
                    </div>
                </el-tabs>
            </el-form>
        </el-card>
        
      </div>
  </div>
</template>

<script>
import editors from "../wangeditor";

export default {
    components: {
        editors,
    },
    directives: {
        focus: {
            // 根据focusState的状态改变是否聚焦focus
            update: function(el, value) {
                // 第二个参数传进来的是个json
                if (value) {
                    el.focus()
                }
            }
        }
    },
    data(){
        return{
            fileList:[],
            activeIndex:0,
             //sup规范
            sup:'',
            sku:'',
            //添加商品信息
            addForm:{
                token: window.sessionStorage.getItem('token'),
                good_name:'',
                type_id:null,
                type_parent_id:0,
                price:null,
                img:'',
                imgs:[], // 图片的数组
                info:'',
                // is_new:null,
                goods_weight:null,
                colour: {},
                edition:[{
                    optional: {},
                    generated:{pic:'',price:''},
                    inventory:''
                }],
            },
            addFormRules:{
                good_name:[
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
                price:[
                    { required: true, message: '请输入商品价格', trigger: 'blur' }
                ],
                goods_weight: [
                    { required: true, message: '请输入商品重量', trigger: 'blur' }
                ],
                inventory:[
                    { required: true, message: '请输入商品数量', trigger: 'blur' }
                ],
                colour:{}
            },
            // uploadURL:'http://api_dev.wanxikeji.cn/api/savePic/'
            options: [],
            editions:[],
            //  每一个sku规格里面拟定的数据如：颜色里面的[红色，蓝色，黄色]这些
            dynamicTags: [],
            // 这个是第四步步骤里的for循环的颜色的模板名称，如[颜色，尺寸，库存，价格]
            templateData:[],
            // 这个是第四步步骤里的for循环的颜色的模板名称，如[颜色，尺寸，库存，价格]
            templateNameList: [],
            // 这个是第四步步骤里的for循环的数据，如[红色，S，11个，56元]
            newTemplateData: [],
            picUrl:'',
            canUse0:false,
            canUse1:false,
            canUse2:false,
            skuFlag:false,
            defaultIndex:0,
        }
    },

    methods:{

        //获取分类数据
        async getGoodID(){
            const {data:res} = await this.$http.post('/api/admin/goodsTypeList',{token:this.addForm.token});
            // console.log(res.data)
            const arr = res.data;       
            arr.forEach((item,index) => {
                this.options[index] = {};
                this.options[index].value = item.good_type_id;
                this.options[index].label = item.type_name;
                let dataList = JSON.parse(JSON.stringify(this.options));
                this.options = dataList
            })
            // console.log(this.options)
        },


        ///上传商品封面
        uploadFile(file){
            let formDatas = new FormData();
            formDatas.append( 'file',file.file);
            this.$http.post('/api/saveFile',formDatas).then(res => {
                // console.log('封面',res)
             
                if(res.data.msg=='保存成功')
                {
                 
                    this.addForm.img = `http://api_dev.wanxikeji.cn/${res.data.data}`
                }
                    
            })
        },
        // 上传商品详情轮播图
        uploadFile2(file){
            let formDatas = new FormData();
            formDatas.append( 'file',file.file);
            this.$http.post('/api/saveFile',formDatas).then(res => {
                // console.log('轮播图',res)
               
                if(res.data.msg=='保存成功'){
                     let str = `http://api_dev.wanxikeji.cn/${res.data.data}`;
                        this.addForm.imgs.push(str)
                }
              
            })
        },
        // 上传商品图片
        uploadFile3(file){
            
            let formDatas = new FormData();
            formDatas.append( 'file',file.file);
            this.$http.post('/api/saveFile',formDatas).then(res => {
                // console.log('轮播图',res)
                this.picUrl = `http://api_dev.wanxikeji.cn/${res.data.data}`
                this.newTemplateData[this.defaultIndex][this.newTemplateData[this.defaultIndex].length-1].pic=this.picUrl
                 
            })
           
        },
        getindex(index){
            console.log(index)
            this.defaultIndex=index
        },
        handleRemove(val,vals){
               console.log(val,vals)
               vals.splice(vals.length-1,1)
        },
        handlePreview(val){
            //    console.log(val)
        },
        handleExceed(val){
                this.$message.error('封面图只能上传一张')
        },
        handleProgress(event, file, fileList){
            console.log(event)
        },
        handleChange(file, fileList){
            console.log(file,fileList)
            if(file.name.split('.')[1]=='mp4'||file.name.split('.')[1]=='gif'||file.name.split('.')[1]=='jpg'||file.name.split('.')[1]=='png'||file.name.split('.')[1]=='jpeg')
            {
                console.log(1)
            }
            else{
                
                this.handleRemove(file,fileList)
            }
        },
        beforeTabLeave(activeName, oldActiveName) {
            // console.log('即将离开的标签页名字是：' + oldActiveName)
            // console.log('即将进入的标签页名字是：' + activeName)
            console.log(this.canUse0)
            if (oldActiveName === '0' && this.canUse0==false) {
                this.$message.error('请先填写完整信息')
                return false
            }
            else if(oldActiveName === '0'&&activeName!='1'){
                return false
            }
         
            if (oldActiveName === '1' && activeName!='0'&& this.canUse1==false) {
                this.$message.error('请先填写完整信息')
                return false
            }
            
        },
        copy() {
            var clipboard = new Clipboard('.tag-read')
            clipboard.on('success', e => {
              this.$message.success('复制成功')
              // 释放内存
              clipboard.destroy()
            })
            clipboard.on('error', e => {
              // 不支持复制
              this.$message.error('该浏览器不支持自动复制')
              // 释放内存
              clipboard.destroy()
            })
        },
        
        //  删除商品规格
        _deleteTemplateData(index) {
            this.templateData.splice(index, 1)
        },
        // 添加规格类型
        _addSpecifoca(){
            this.templateData.push({
                name: '',
                dynamicTags: [],
                tagInputVisible: false,
                tagInputValue: '',
                focusState: false
            })
        },

        // 删除单个标签
        handleClose(tag, item) {
            item.dynamicTags.splice(item.dynamicTags.indexOf(tag), 1);
        },

        _addshowInput(item, index) {
            item.tagInputVisible = true
            this.$nextTick(() => {
                item.focusState = true
            });
        },

        //按下enter或者失去焦点的时候触发Input里面的值到<el-tag>
        handleInputConfirm(item, index) {
            const tagInputValue = item.tagInputValue
            if (tagInputValue) {
                if (item.dynamicTags.indexOf(tagInputValue) === -1) {
                item.dynamicTags.push(tagInputValue)
                } else {
                    this.$message.error('请勿重复输入')
                }
            }
            item.tagInputVisible = false
            item.tagInputValue = ''
            // console.log(item)
        },
        recursionData(array) {
            return array.reduce(
                function(a, b) {
                return a
                    .map(function(x) {
                    return b.map(function(y) {
                        return x.concat(y)
                    })
                    })
                    .reduce(function(a, b) {
                    return a.concat(b)
                    }, [])
                },
                [[]]
            )
        },
        // 上一步
        _previousStep() {
            this.activeIndex = Number(this.activeIndex)
            this.activeIndex--
            this.activeIndex = String(this.activeIndex)
        },
        addspu(){
             this.addForm.colour={}
            if(this.activeIndex == 0){
               
                this.sup=this.sup.replace(/，/g,',')
                console.log(this.sup)
                // if(this.sup.lastIndexOf(',')==this.sup.length-1){
                //     this.sup=this.sup.substring(0,this.sup.length-1)
                // }
                this.clearo(this.sup)
                console.log(this.sup)
                let supArr = this.sup.split(",");
                
                //console.log(supArr)
                // supArr.forEach((el,index)=>{
                //     for(let i=index+1;i<supArr.length;i++){
                //         if(el==supArr[i]){
                //             supArr.splice(i,1)
                //         }
                //     }
                // })
                this.norepeat(supArr)
                this.cleararr(supArr)
                console.log(supArr)
                this.sup=supArr.join(',')
                console.log(this.sup)
                for(let i = 0; i < supArr.length; i++) {
                    this.addForm.colour[supArr[i]] = ""
                    let tmp = JSON.parse(JSON.stringify(this.addForm))
                    this.addForm = tmp
                }
            }
        },
        norepeat(arr) {
       for(var i = 0; i < arr.length-1; i++){
           for(var j = i+1; j < arr.length; j++){
               if(arr[i]==arr[j]){
                   arr.splice(j,1); 
                   j--;
               }
           }
       }
       return arr;
        },

        cleararr(arr){
            arr.forEach((el,index)=>{
                console.log(el)
                if(el==''){
                    console.log(1)
                    arr.splice(index,1)
                }
            })
        },
        clearo(reg){
            if(reg.lastIndexOf(',')==reg.length-1){
                   reg=reg.substring(0,reg.length-1)
                   //console.log(reg)
                   this.clearo(reg)
            }
            
            return reg
               
        },
        addsku(){
              this.newTemplateData = []
            this.templateNameList = []
            const array = []
            if (this.activeIndex == 1) {
                this.templateData.forEach(element => {
                this.templateNameList.push(element.name)
                array.push(element.dynamicTags)
                })
                this.newTemplateData = this.recursionData(array).filter(item => {
                item.push({stockNum:0},{price:''},{pic:''})
                return item
                })
                console.log(this.newTemplateData)
                this.templateNameList.push('库存', '价格','图片')
            }
        },
        // 下一步步骤
        _nextStep(){
            
            if(this.activeIndex == 0){
                if(this.addForm.good_name){
                     if(this.addForm.price){
                         if(this.addForm.type_id){
                             
                             if(this.sup){
                                 var flag=false;
                                 for (const i in this.addForm.colour) {
                                    if(this.addForm.colour[i]){
                                        flag=false;
                                    }
                                    else{
                                        flag=true
                                    }
                                 }
                                 if(flag==false){
                                        
                                        this.canUse0=true
                                        this.activeIndex = Number(this.activeIndex)
                                        this.activeIndex++
                                        this.activeIndex = String(this.activeIndex)
                                 }
                                 else{
                                     this.$message('请输入商品参数值');
                                 }
                                 
                             }
                             else{
                                 this.$message('请输入商品参数名称');
                             }
                           
                         }
                         else{
                             this.$message('请选择商品类型');
                         }
                     }
                     else{
                         this.$message('请填写商品价格');
                     }
                }
                else{
                this.$message('请填写商品名称');
                }
            }
        
            else if(this.activeIndex == 1){
                if(this.newTemplateData.length>0){
                    // var priceflag=false
                    // this.newTemplateData.forEach(el=>{
                    //      console.log(el)
                    //     if(el.price==null){
                    //        priceflag=true
                    //     }
                    // })
                    // console.log('priceflag',priceflag)

                    // if(priceflag==false){
                    //     var imgflag=false
                    //      this.newTemplateData.forEach(el=>{
                    //     if(el.pic==null){
                    //         imgflag=true
                    //     }
                    //     })
                    //     console.log('imgflag',imgflag)
                    //     if(imgflag==false){
                    //         this.canUse1=true
                    //         this.activeIndex = Number(this.activeIndex)
                    //         this.activeIndex++
                    //         this.activeIndex = String(this.activeIndex)
                    //     }
                    //     else{
                    //         this.$message('请完善商品图片');
                    //     }
                    // }
                    // else{
                    //      this.$message('请完善商品价格');
                    // }
                    this._saveTemplate()
                    if(this.skuFlag){
                                 this.canUse1=true
                                 
                            this.activeIndex = Number(this.activeIndex)
                            this.activeIndex++
                            this.activeIndex = String(this.activeIndex)
                    }
                    else{
                        this.$message('请先完善商品信息');
                    }
                }
                else{
                    this.$message('请添加商品规格');
                }
            }
            else if(this.activeIndex == 2){
                 this.activeIndex = Number(this.activeIndex)
                            this.activeIndex++
                            this.activeIndex = String(this.activeIndex)
            }
            // console.log('页面渲染',this.newTemplateData)
        },
        // 保存添加的模板
        _saveTemplate() {
            var newVal = []
            // console.log('newTemplateData',this.newTemplateData)
            const sku = this.newTemplateData.reduce((c, item) => {
                newVal = []
                for (let k = 0; k < item.length - 3; k++) {
                    newVal.push({
                        keyName: [...this.templateNameList][k],
                        keyVal: item[k]
                    })
                }
            //    console.log('item111111',item)
                return c.concat({
                price: item[item.length - 2].price,
                stockNum: item[item.length - 3].stockNum,
                pic: item[item.length - 1].pic,
                item_id: [...newVal]
                })
            }, [])
            // console.log('sku数据',sku)
            let editionTest = []
            sku.forEach((item,index) => {
                let tmp = {
                    optional:{},
                    generated:{pic:'',price:''},
                    inventory:""
                }
                item.item_id.forEach(it=>{
                    tmp.optional[it.keyName] = it.keyVal
                })
                tmp.generated.pic = item.pic;
                tmp.generated.price = item.price;
                tmp.inventory = item.stockNum
                // console.log('库存',item.stockNum)
                editionTest.push(tmp)
            })

            var flag=true
            console.log(flag)
            editionTest.forEach(el=>{
                if(el.generated.price){
                    flag=false
                }
                else{
                    flag=true
                }
            })
            console.log(flag)
            if(flag==false){
                this.skuFlag=true
                 this.addForm.edition = editionTest;
                  this.$message('保存成功');
            }
            else{
                this.$message('保存失败,请完善商品价格');
            }
            // console.log('要上传的sku',editionTest)
           
            // console.log('要上传的sku',this.addForm.edition)
            
        },
    
        //提交
        async submitInfo(){
            console.log(this.addForm)
            this.addForm.info = window.localStorage.getItem('info');
            const {data:res} = await this.$http.post('/api/admin/addModifyGood',this.addForm)
            if(res.code!=2000) return this.$message.error('添加失败!')
            this.$message.success('添加商品成功!')
            this.$router.push('/categories')
           
        },
    },
    mounted(){
        this.getGoodID()
        this._addSpecifoca()
        
    }
}
</script>

<style lang="less" scoped>
/deep/.el-tabs__content {
    min-height: 200px;
    padding-left: 30px;
}
/deep/.el-tag{
    max-width: 277px;
   
    overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
padding: 0 15px;
margin-right: 10px;

}
/deep/.el-tabs__nav.is-left {
    // font-size: 20px;
    padding: 0 50px;
}
 /deep/.el-tabs__item.is-left {
    height: 60px;
    line-height: 60px;
  }
/deep/.el-tag .el-icon-close{
    position: absolute;
    right: 0px;
    top: 8px;
    z-index: 100;
}
/deep/.tag-box{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.last-box{
    display: flex;
}
.shili-box{
    padding: 10px 0;
}
.shili-title{
    margin-bottom: 10px;
}
.stepThird{
    .addSpecificaType{
      margin-bottom: 10px;
    }
   
    .itemTag{
      margin-bottom: 20px;
      .outerBorder{
        width: 100%;
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        position: relative;
        .close{
          position: absolute;
          right: 0;
          top: 0;
          i{
            font-size: 20px;
            cursor: pointer;
          }
        }
        .inputMar{
          margin-bottom: 10px;
        }
      }
    }
  }
   .confirm-btn{
        margin-bottom: 10px;   
    }
  .stepFour{
    width: 100%;
    margin: auto;
    &__name{
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #eee;
        display: flex;
        align-items: center;
      .item{
        flex: 1;
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
        border-right: 1px solid #eee;
        padding: 0 10px;
        box-sizing: border-box;
      }
    }
    &__box{
      &__panel{
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #eee;
        display: flex;
        align-items: center;
        .item{
          flex: 1;
          width: 120px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 14px;
          border-right: 1px solid #eee;
          padding: 0 10px;
          box-sizing: border-box;
        }
      }
    }
  }
.rigEnd {
    display: flex;
    justify-content: flex-end;
    margin: 30px 0 20px 0;
    .previousBtn{
      color: #333;
      margin-right: 20px;
    }
    .saveBtn{
      width: 200px;
      height: 46px;
    }
  }
/deep/.specification {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 5px;
    position: relative;
    width: 80%;
    input {
        width: 50%;
    }
    .error-btn {
        position: absolute;
        right: 0px;
        top: 0px;
        font-size: 25px;
        &:hover {
            cursor: pointer;
        }
    }
    .input-new-tag{
        margin-top: 10px;
    }
}
/deep/.input-new-tag {
    display: inline-block;
    min-width: 40px;
    // width: 20% !important;
}
/deep/.el-alert {
    padding: 0;
    width: 98%;
}
// .box-card {
//     min-height: 500px;
// }
/deep/.el-table__body-wrapper {
    font-size: 13px;
}
.container {
  min-height: 850px;
  background: #f6f6f6;
  padding-top: 20px;

  .table-data{
      padding: 0 20px;
  }

  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-table td, /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-form-item__label {
    width: 90px !important;
  }
  /deep/.el-form-item{
      margin-bottom: 10px;
  }
  /deep/.el-input {
    width: 98%;
  }
  /deep/.el-form-item__label{
      line-height: 30px;
  }
  /deep/.el-form-item__label.el-form-title{
      padding: 0;
  }
   /deep/.sku-reg{
      margin: 10px 0;

      .el-form-item__label{
          padding: 0;
      }
  }
//   ===============

.el-steps {
  width: 70%;
  margin-left: 15%;
}
  .flex-row {
    display: flex;
    column-gap: 20px;
  }
  .coverImg .el-form-item__content {
    width: 100%;
  }
  .coverImg img {
    max-width: 30%;
    min-width: 20%;
    display: block;
  }
  .banner-title{
    font-size: 14px;
    background-color: #ccc9;
    padding: 10px 0;
    margin: 0 0 10px 0;
    padding-left: 15px;
  }

  .flex{
    display: flex;
    column-gap: 20px;
    flex-wrap: wrap
  };
  .flex .el-form-item{
    max-width: 20%;
    min-width: 10%;
  }
  .swiperImg .el-form-item img{
    width: 100%;
  }
  .shili-title{
      color: #aaa;
  }
  .shili-box img{
      border: 3px dashed #ccc;
      margin-bottom: 20px;
  }
}









</style>